<template>
	<view class="discover">
		<z-paging ref="paging" :auto='true' bg-color="#FFF" class="zpaing" v-model="dataList" @query="getDataList">
			<view slot="top">
				<view class="topCon">
					<view class="topTem">
						<view class="tLeft">
							<text>附近</text>
							<text class="noChoose">推荐</text>
						</view>
						<view class="tRight" @tap="goto('/pages/discover/release')">
							<text>发布</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="cDiv" v-for="(item,index) in dataList" :key="index">
					<view class="cTop">
						<view class="cLeft">
							<image src="/static/images/doctor-logo.png" mode=""></image>
						</view>
						<view class="cRight">
							<text class="name">测试</text>
							<view class="crP">
								<text class="time">3小时前</text>
								<view class="positionCon">
									<u-icon name="map" size="14"></u-icon>
									<text class="address">东莞市东城区时代广场东莞市东城区时代东莞市东城区时代广场东莞市东城区时代</text>
								</view>
							</view>
						</view>
						<view class="follow">
							<text>关注</text>
						</view>
					</view>
					<view class="cContent">
						<text>腰椎求饶信号：酸麻胀痛！每日三组臀桥，每坐1h起身划水，护腰从细节开始🦴</text>
						<view class="contentImage">
							<image src="/static/images/nav-tag-1.png" mode="" v-for="(item,index) in 5" :key='index'>
							</image>
						</view>
					</view>
					<view class="cBottom">
						<view class="cbLeft">
							<text>#腰椎日常保养</text>
						</view>
						<view class="cbRight">
							<view class="rightDiv">
								<view class="iconfont icon-xihuan">
								</view>
								<text>123</text>
							</view>
							<view class="rightDiv" @tap="answerPop=true">
								<view class="iconfont icon-pinglun">
								</view>
								<text>566</text>
							</view>
							<view class="rightDiv" @tap="sharePop=true">
								<view class="iconfont icon-fenxiang">
								</view>
								<text>10</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 回复弹窗 -->
		<u-popup :show="answerPop" @close="answerPop=false" mode="bottom" round='10'>
			<view class="popStyle">
				<view class="popTop">
					<view class="popClose" @tap="answerPop=false">
						<view class="iconfont icon-xiala-yuan">
						</view>
					</view>
					<text class="title">20条评论</text>
				</view>
				<view class="popContent">
					<scroll-view scroll-y="true" class="scrollCon">
						<view class="scrollItem" v-for="(item,index) in 10" :key="index">
							<view class="itemCon">
								<view class="itemLeft">
									<image src="/static/images/doctor-logo.png" mode=""></image>
								</view>
								<view class="itemRight">
									<view class="rightOne">
										<view class="oneDiv">
											<text class="nick">小问号</text>
											<text>7月15日</text>
										</view>
										<view class="oneDiv">
											<text class="reply">回复</text>
											<text>122</text>
											<view class="iconfont icon-xihuan chooseIcon">
											</view>
										</view>
									</view>
									<view class="answerContent">
										<text>下面我们会从不同维度来分析一下APP的社交分享功能设计，看看这里面有哪些值得探讨之处。现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒</text>
									</view>
								</view>
							</view>
							<view class="itemCon childrenAnswer">
								<view class="itemLeft">
									<image src="/static/images/doctor-logo.png" mode="" class="answerImage"></image>
								</view>
								<view class="itemRight">
									<view class="rightOne">
										<view class="oneDiv">
											<text class="nick">小问号很多朋友</text>
											<text class="author">作者</text>
											<text>7月15日</text>
										</view>
										<view class="oneDiv oneDiv2">
											<text class="reply">回复</text>
											<text>122</text>
											<view class="iconfont icon-xihuan">
											</view>
										</view>
									</view>
									<view class="answerContent">
										<text>测试回复内容测试回复内容测试回复内容测试回复内容</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="popBtn">
					<u--input placeholder="写留言" border="none" shape='circle' v-model="answer"></u--input>
					<view class="iconCon">
						<view class="iconfont icon-xiaolian">
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 分享弹窗 -->
		<u-popup :show="sharePop" @close="sharePop=false" mode="bottom" round='8'>
			<view class="sharePopStyle">
				<view class="shareTitle">
					<text>分享</text>
				</view>
				<view class="shareContent">
					<view class="conDiv">
						<image src="/static/images/order/wx.svg" mode=""></image>
					</view>
					<view class="conDiv">
						<image src="/static/images/order/pyq.svg" mode=""></image>
					</view>
				</view>
				<view class="sharePlaceholder">
				</view>
				<view class="shareCancle" @tap="sharePop=false">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import baseMixin from "@/mixin/baseMixin.js"
	export default {
		mixins: [baseMixin],
		data() {
			return {
				answerPop: false,
				sharePop: false,
				answer: '',
				dataList: []
			}
		},
		onLoad() {

		},
		methods: {
			getDataList() {
				this.$refs.paging.complete([
					{},
					{},
					{},
					{},
				]);
			// 	let params = {
			// 		pageNo: pageNo,
			// 		pageSize: pageSize
			// 	}
			// 	this.fnTestList(params).then((res) => {
			// 		this.$refs.paging.complete(res.rows);
			// 	})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discover {
		position: relative;
	}

	.topCon {
		background: linear-gradient(180deg, rgba(68, 212, 168, 0.3) 0%, rgba(68, 212, 168, 0) 100%);
		height: 230rpx;
		display: flex;
		align-content: center;

		.topTem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx;
			width: 100%;

			.tLeft {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;

				text:nth-child(2) {
					margin-left: 32rpx;
				}

				.noChoose {
					font-size: 32rpx;
					font-weight: 500;
				}
			}

			.tRight {
				width: 112rpx;
				height: 56rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				background: $theme-color;
				color: #fff;
			}
		}
	}

	.content {
		padding: 0 32rpx;

		.cDiv {
			position: relative;
			border-bottom: 2rpx solid #E0DADA;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;

			.cTop {
				display: flex;
				align-items: center;

				.cLeft {
					image {
						border-radius: 50%;
						width: 96rpx;
						height: 96rpx;
					}
				}

				.cRight {
					display: flex;
					flex-direction: column;
					line-height: 50rpx;
					margin-left: 24rpx;

					.name {
						font-weight: bold;
						font-size: 32rpx;
					}

					.crP {
						display: flex;
						align-items: center;
						color: rgba(152, 160, 166, 1);
						margin-top: 8rpx;

						.time {
							width: 150rpx;
							font-size: 24rpx;
						}

						.positionCon {
							display: flex;
							align-items: center;

							.address {
								font-size: 22rpx;
								overflow: hidden;
								word-break: break-all;
								text-overflow: ellipsis;
								/*#ifndef APP-PLUS-NVUE*/
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								/* #endif */
								lines: 1;
							}
						}
					}
				}

				.follow {
					position: absolute;
					right: 0rpx;
					top: 0;
					background: rgba(68, 212, 168, 0.1);
					width: 112rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: $theme-color;
					border-radius: 30rpx;
					font-size: 32rpx;
					font-weight: 400;
				}
			}

			.cContent {
				letter-spacing: 3rpx;
				font-size: 28rpx;
				font-weight: 400;
				margin-top: 25rpx;

				.contentImage {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-between;
					margin-top: 24rpx;

					image {
						width: 180rpx;
						height: 180rpx;
						margin-right: 28rpx;
						margin-bottom: 24rpx;
					}
				}
			}

			.cBottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.cbLeft {
					color: rgba(76, 212, 230, 1);
				}

				.cbRight {
					display: flex;
					align-items: center;

					.rightDiv {
						display: flex;
						align-items: center;
						margin-right: 36rpx;

						.iconfont {
							font-size: 35rpx;
						}

						text {
							margin-left: 11.2rpx;
							font-size: 24rpx;
						}
					}

					.rightDiv:last-child {
						margin: 0;
					}
				}
			}
		}
	}

	.popStyle {
		.popTop {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 126rpx;
			font-size: 32rpx;
			padding: 0 32rpx;
			font-weight: 500;

			.popClose {
				position: absolute;
				top: 40rpx;
				left: 32rpx;

				.iconfont {
					font-size: 48rpx;
				}
			}

			.title {
				color: rgba(54, 68, 79, 1);
				font-size: 32rpx;
				font-weight: 500;
			}
		}

		.popContent {
			position: relative;

			.scrollCon {
				height: 900rpx;
				margin: 0 32rpx;

				.scrollItem {
					position: relative;
					margin-bottom: 30rpx;
				}

				.answerImage {
					width: 64rpx !important;
					height: 64rpx !important;
				}

				.itemCon {
					display: flex;

					.itemLeft {
						margin-right: 10rpx;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.itemRight {
						display: flex;
						flex-direction: column;

						.rightOne {
							width: 598rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;

							.nick {}

							.author {
								color: rgba(76, 212, 230, 1);
								margin: 0 10rpx;
							}

							.oneDiv {
								display: flex;
								align-items: center;

								.iconfont {
									margin-left: 6rpx;
								}
							}
						}

						.answerContent {
							line-height: 35rpx;
							width: 600rpx;
							margin: 10rpx 0;
							font-size: 24rpx;
						}
					}
				}

				.childrenAnswer {
					margin: 32rpx auto 0 80rpx;

					.answerContent {
						width: 540rpx !important;
					}

					.rightOne {
						width: 530rpx !important;
					}
				}
			}
		}

		.popBtn {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.08);
			height: 196rpx;
			padding: 0 32rpx;

			.iconCon {
				margin-left: 32rpx;

				.iconfont {
					font-size: 54rpx;
				}
			}
		}
	}

	::v-deep .u-input--circle {
		background: rgba(246, 248, 252, 1);
		height: 80rpx;
	}

	::v-deep .uni-input-wrapper {
		margin-left: 25rpx;
	}

	.chooseIcon {
		// color: red;
	}

	.sharePopStyle {
		.shareTitle {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 108rpx;
			font-weight: 400;
		}

		.shareContent {
			height: 224rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 156rpx;

			.conDiv {
				width: 104rpx;
				height: 104rpx;
				background: rgba(247, 247, 247, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 24rpx;

				image {
					width: 54rpx;
					height: 42px;
				}
			}
		}

		.sharePlaceholder {
			height: 16rpx;
			width: 100%;
			background: rgba(242, 243, 245, 1);
		}

		.shareCancle {
			height: 108rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: inset 0px -0.5px 0px rgba(229, 230, 235, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.reply {
		margin-right: 32rpx;
	}
</style>